<template>
    <el-card>
      <el-container class="main-container">
        <!-- 顶部标题栏 -->
        <el-header style="height: 95px;">
          <h2>比赛管理</h2>
          <!-- 创建事件按钮 -->
           <div>
            <el-button type="primary" @click="createRace = true">+ 创建比赛</el-button>
           </div>
        </el-header>
        <div>
          <!-- 事件创建对话框 -->
          <el-dialog title="新建根分类" v-model="createRace" width="30%">
            <el-form :model="eventForm" label-width="100px">
              <el-form-item label="赛事名称">
                <el-input
                  v-model="eventForm.name"
                  placeholder="请输入赛事名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="赛事时间">
                <el-date-picker
                  v-model="eventForm.dates"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="赛事图片">
                <el-upload
                  action="#"
                  list-type="picture-card"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-form>
  
            <!-- 对话框底部 -->
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveEvent">保存</el-button>
              </span>
            </template>
          </el-dialog>
        </div>
        <el-container>
          <!-- 主要内容 -->
          <el-container>
            <el-main>
              <!-- 筛选区域 -->
              <el-row class="filter-area" :gutter="20">
                <el-col :span="8">
                  <el-input
                    placeholder="赛事名称"
                    v-model="searchName"
                  ></el-input>
                </el-col>
                <el-col :span="8">
                  <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-col>
                <el-col :span="4">
                  <el-select v-model="status" placeholder="状态">
                    <el-option label="全部" value="all"></el-option>
                    <el-option label="待开始" value="pending"></el-option>
                    <el-option label="进行中" value="ongoing"></el-option>
                    <el-option label="已结束" value="finished"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-button type="primary" @click="searchEvents">搜索</el-button>
                  <el-button @click="resetFilters">重置</el-button>
                </el-col>
              </el-row>
  
              <!-- 列表项 -->
              <el-tabs v-model="activeTab">
                <el-tab-pane label="待开始" name="pending"></el-tab-pane>
                <el-tab-pane label="进行中" name="ongoing"></el-tab-pane>
                <el-tab-pane label="待审核" name="reviewing"></el-tab-pane>
                <el-tab-pane label="已结束" name="finished"></el-tab-pane>
              </el-tabs>
  
              <div class="event-list">
                <el-card
                  class="event-card"
                  v-for="(event, index) in events"
                  :key="index"
                >
                  <el-row>
                    <el-col :span="4">
                      <img
                        :src="showPic(event.image)"
                        alt="赛事图片"
                        style="
                          width: 100%;
                          height: 100%;
                          object-fit: cover;
                          border-radius: 15px;
                        "
                      />
                    </el-col>
                    <el-col :span="20" class="event-info">
                      <h3>{{ event.name }}</h3>
                      <p>赛事时间：{{ event.start }} - {{ event.end }}</p>
                      <div class="event-actions">
                        <el-button type="text" @click="openDetail(event.id)">详情</el-button>
                      <el-button type="text" @click="openEditDialog(event)">编辑</el-button>
                      </div>
  
                    </el-col>
                  </el-row>
                </el-card>
              </div>
              <!-- 详情弹框 -->
               <div>
                <el-dialog
                v-model="raceDetail"
                title="赛事详情"
                width="30%"
              >
                <div v-if="selectedEvent">
                  <h3>{{ selectedEvent.name }}</h3>
                  <p>
                    赛事时间：{{ selectedEvent.start }} - {{ selectedEvent.end }}
                  </p>
                  <img
                    :src="showPic(selectedEvent.image)"
                    alt="赛事图片"
                    style="width: 100%; border-radius: 10px"
                  />
                </div>
                <template #footer>
                  <el-button @click="raceDetail = false">关闭</el-button>
                </template>
              </el-dialog>
               </div>
              
              <!-- 编辑弹框 -->
              <el-dialog v-model="editDialogVisible" title="编辑赛事" width="30%">
                <el-form :model="currentEvent" label-width="100px">
                  <el-form-item label="赛事名称">
                    <el-input v-model="currentEvent.name" placeholder="请输入赛事名称"></el-input>
                  </el-form-item>
                  <el-form-item label="赛事时间">
                    <el-date-picker
                      v-model:start="currentEvent.start"
                      v-model:end="currentEvent.end"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="赛事图片">
                    <el-upload
                      action="#"
                      list-type="picture-card"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                  </el-form-item>
                </el-form>
                <template #footer>
                  <span class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="saveEdit">保存</el-button>
                  </span>
                </template>
              </el-dialog>
              <!-- 分页 -->
              <div class="pagination">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="1000"
                />
              </div>
            </el-main>
          </el-container>
        </el-container>
      </el-container>
    </el-card>
  </template>
  
  <script setup>
  import { ref } from "vue";
  const createRace = ref(false);
  const dialogVisible = ref(false);
  const raceDetail = ref(false); // 赛事详情页
  const selectedEvent = ref(null); // 选中的赛事
  const eventForm = ref({
    name: "",
    dates: [],
    image: "",
    state: "",
  });
  const searchName = ref("");
  const dateRange = ref([]);
  const status = ref("all");
  const activeTab = ref("pending");
  const events = ref([
    {
      id: 1,
      name: "2022年春季赛",
      image: "./logo.png",
      start: "2022-01-01",
      end: "2022-03-31",
    },
    {
      id: 2,
      name: "2022年夏季赛",
      image: "./logo.png",
      start: "2022-04-01",
      end: "2022-06-30",
    },
    {
      id: 3,
      name: "2022年秋季赛",
      image: "./logo.png",
      start: "2022-07-01",
      end: "2022-09-30",
    },
  ]);
  // 定义编辑弹框的显示状态
  const editDialogVisible = ref(false);
  // 定义当前编辑的赛事数据
  const currentEvent = ref(null);
  
  // 打开编辑弹框的方法
  const openEditDialog = (event) => {
    currentEvent.value = event; // 设置当前编辑的赛事数据
    editDialogVisible.value = true; // 打开编辑弹框
  };
  
  // 保存编辑后的赛事数据
  const saveEdit = () => {
    if (!currentEvent.value.name || !currentEvent.value.start || !currentEvent.value.end) {
      console.error("请完整填写信息!");
      return;
    }
    // 保存编辑逻辑（更新赛事数据等）
    console.log("编辑后的赛事:", currentEvent.value);
  
    // 关闭编辑弹框
    editDialogVisible.value = false;
  
    console.log("赛事编辑成功!");
  };
  const saveEvent = () => {
    if (!eventForm.value.name || eventForm.value.dates.length === 0) {
      alert("请填写完整信息");
      return;
    }
    // 将事件添加到事件列表
    console.log("新赛事:", eventForm.value);
  
    // 清空表单数据并关闭对话框
    eventForm.value = { name: "", dates: [], image: "" };
    dialogVisible.value = false;
  
    console.log("赛事创建成功!");
  };
  ``;
  const openDetail = (event) => {
    selectedEvent.value = event; // 设置当前选中的赛事
    raceDetail.value = true; // 显示弹框
  };
  const handlePreview = (file) => {
    console.log("预览图片:", file);
  };
  
  const handleRemove = (file, fileList) => {
    console.log("删除图片:", file, fileList);
  };
  
  const searchEvents = () => {
    // 搜索事件逻辑
    console.log("搜索事件:", dateRange.value, status.value);
  };
  
  const resetFilters = () => {
    // 重置过滤器逻辑
    dateRange.value = "";
    status.value = "";
  };
  const showPic = (name) => {
    return new URL(name, import.meta.url).href;
  };
  </script>
  
  <style scoped>
  .event-list {
    padding: 20px;
  }
  .event-card {
    margin-bottom: 10px;
  }
  .main-container {
    min-height: 100vh;
  }
  
  .aside {
    background-color: #f5f5f5;
  }
  
  .filter-area {
    margin: 20px 0;
  }
  .event-info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 20px;
  }
  .event-actions{
    display: flex;
    justify-content: flex-start;
    width: 100px;
  }
  .event-card {
    margin-bottom: 20px;
  }
  .el-upload .el-icon-plus {
    font-size: 32px;
    color: #8c939d;
  }
  .pagination {
    display: flex;
    justify-content: end;
  }
  </style>
  